<template>
	<div class="shop-fixed" :style="{ bottom: fixedOffset }">
		<div class="price">
			<em>￥</em>{{ options.pay_money || 9.9 }}
			<div class="original">原价{{ options.original_cost || 9.9 }}元</div>
		</div>
		<div class="tips" v-if="shopType != 'shop4' && shopType != 'shop3'">
			<p>先到先得</p>
			<span>今日仅{{ options.num || 100 }}个名额</span>
		</div>
		<van-button class="btn" color="#ff4b00" @click="handleClick">立即预约</van-button>
	</div>
</template>
<script>
export default {
	props: {
		view: {
			type: Object,
			default: () => ({})
		},
		fixedViews: {
			type: Array,
			default: () => []
		}
	},
	computed: {
		options() {
			return this.view.options || {};
		},
		shopType() {
			return this.view.type || null;
		},
		fixedOffset() {
			let views = [...this.fixedViews].reverse();
			let len = views.length;
			let res = 0;
			for (let i = 0; i < len; i++) {
				let item = views[i];
				if (item.uid === this.view.uid) break;
				res += item?.options?.fixed_height || 0;
			}
			return `calc(${res}rem + var(--safe-area-inset-bottom) / 2)`;
		}
	},
	methods: {
		handleClick() {
			this.$emit("click");
		}
	}
};
</script>
<style lang="scss" scoped>
.shop-fixed {
	border-top: solid 1px #f8f4f2;
	height: 1.7332rem;
	line-height: 1;
	padding: 0.1111rem 0.2666rem;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	min-width: 320px;
	max-width: 640px;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99;
	.price {
		font-size: 34px;
		font-weight: bold;
		em {
			font-size: 18px;
		}
		.original {
			font-size: 12px;
			font-weight: normal;
			color: #909399;
			text-decoration: line-through;
		}
	}
	.tips {
		font-size: 12px;
		span {
			margin-top: 2px;
			display: inline-block;
			text-align: center;
			border-radius: 3px;
			color: #fff;
			background: #ff4b00;
			padding: 6px 10px;
		}
	}
	.btn {
		width: 2.8rem;
		font-size: 0.38rem;
	}
}
</style>
